<template>
  <div>
    <el-button type="primary" size="mini" @click="toGen">生成代码</el-button>
    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" title="代码生成配置" append-to-body
               width="880px">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px">
        <el-form-item label="模块名称" prop="moduleName">
          <el-input v-model="form.moduleName"/>
        </el-form-item>
        <el-form-item label="包路径" prop="pack">
          <el-input v-model="form.pack"/>
        </el-form-item>
        <el-form-item label="项目路径" prop="projectPath">
          <el-input v-model="form.projectPath"/>
        </el-form-item>
        <el-form-item label="前端路径">
          <el-input v-model="form.path" placeholder="为空不生成前端代码"/>
        </el-form-item>
        <el-sl-panel style="color: #909399;">字段显示是为了生成前端代码显示，不需要的话可以不做理会,暂未完成</el-sl-panel>
        <el-table v-loading="loading" :data="data" size="small" style="width: 100%;margin-bottom: 15px">
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="columnName" label="字段名称"/>
          <el-table-column prop="columnType" label="字段类型"/>
          <el-table-column prop="columnComment" label="字段标题">
            <template slot-scope="scope">
              <el-input v-model="data[scope.$index].columnComment" class="edit-input"/>
            </template>
          </el-table-column>
          <el-table-column label="查询方式">
            <template slot-scope="scope">
              <el-select v-model="data[scope.$index].columnQuery" class="edit-input" clearable placeholder="请选择">
                <el-option
                  label="模糊查询"
                  value="1"/>
                <el-option
                  label="精确查询"
                  value="2"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="columnShow" label="列表显示">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.columnShow === 'true' ?'显示':'不显示'" placement="top">
                <el-switch
                  v-model="data[scope.$index].columnShow"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="true"
                  inactive-value="false"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="作者名称" prop="author">
          <el-input v-model="form.author"/>
        </el-form-item>
        <el-form-item label="去表前缀" prop="prefix">
          <el-input v-model="form.prefix" placeholder="默认不去除表前缀"/>
        </el-form-item>
        <!--    可自定义显示配置    -->
        <!--        <el-form-item label="Api路径">-->
        <!--          <el-input v-model="form.apiPath"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="是否覆盖" prop="cover">
          <el-radio-group v-model="form.cover" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="genLoading" type="primary" @click="doSubmit">生成</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import {update, get, generator, getColums} from '../../api/genConfig'

export default {
  name: 'Generator',
  mixins: [initData],
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      genLoading: false,
      dialog: false,
      columnQuery: '',
      form: {author: '', pack: '', path: '', moduleName: '', projectPath: '', cover: 'false', apiPath: '', prefix: ''},
      rules: {
        author: [
          {required: true, message: '作者不能为空', trigger: 'blur'}
        ],
        pack: [
          {required: true, message: '包路径不能为空', trigger: 'blur'}
        ],
        projectPath: [
          {required: true, message: '项目路径不能为空', trigger: 'blur'}
        ],
        moduleName: [
          {required: true, message: '包路径不能为空', trigger: 'blur'}
        ],
        // path: [
        //   {required: true, message: '前端代码生成路径不能为空', trigger: 'blur'}
        // ],
        cover: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    toGen () {
      this.dialog = true
      this.time = 130
      this.$nextTick(() => {
        this.init()
        get().then(data => {
          if (data) {
            this.form = data
            this.form.cover = this.form.cover.toString()
          }
        })
        getColums(this.name).then(data => {
          this.data = data
        })
      })
    },
    cancel () {
      this.dialog = false
      this.genLoading = false
      this.$refs['form'].resetFields()
      this.form = {
        author: '',
        pack: '',
        path: '',
        moduleName: '',
        projectPath: '',
        cover: 'false',
        apiPath: '',
        prefix: ''
      }
    },
    doSubmit () {
      this.genLoading = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          update(this.form).then(res => {
            generator(this.data, this.name).then(res => {
              debugger
              this.$notify({
                title: '生成成功',
                type: 'success',
                duration: 2500
              })
              this.cancel()
            }).catch(err => {
              this.cancel()
              console.log(err.response.data.message)
            })
          }).catch(err => {
            this.cancel()
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.edit-input {
  .el-input__inner {
    border: none;
  }
}
</style>

<style scoped>
/deep/ .el-dialog__body {
  padding-bottom: 5px;
}

/deep/ .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
